<html>
    <head>
        <title>提交方式</title>
    </head>
    <body>
        <script>
             /*
                            五、提交方式

                                    1、对象风格的提交方式

                                                我们修改组件中 store.commit 提交方式：

                                                !-- 页面路径：  pages/index/index.vue ---

                                                <template>
                                                    <view>
                                                        <view>数量： {{count}} </view>
                                                        <button @click ="addCount">增加</button>
                                                    </view>
                                                </template>
                                                <script>
                                                    import store from '@/store/index.js'
                                                    export default{
                                                        computed:{
                                                            count(){
                                                                return this.$store.state.count
                                                            }
                                                        },
                                                        methods:{
                                                            addCount(){ // 整个对象都作为载荷传给 mutation 函数
                                                                store.commit({
                                                                    type:'add',
                                                                    amount:6
                                                                })
                                                            }
                                                        }
                                                    }
                                                <//script>

                                        当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此  handler 保持不变：

                                                mutations:{
                                                    add(state,payload){
                                                        state.count += payload.amount
                                                    }
                                                }


                                 2、mapMutations 辅助函数

                                        通过mapMutations 辅助函数提交。

                                        创建组件方法提交 mutation。

                                        使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

                                        eg:

                                                !--- 页面路径：  pages/index/index.vue ---

                                                <template>
                                                    <view>
                                                        <view>数量： {{ count}} </view>
                                                        <button @click="add">增加</button>
                                                    </view>
                                                </template>

                                                <script>
                                                    import {mapMutations} from 'vuex' // 引入辅助函数
                                                    export default{
                                                        computed:{
                                                            count(){
                                                                return this.$store.state.count
                                                            }
                                                        },
                                                        methods:{
                                                            ...mapMutations(["add"]) // 将 add 方法映射为 this.add()
                                                        }
                                                    }
                                                <//script>

                                                !-- 页面路径： store/index.js ---
                                                import Vue from 'vue'
                                                import Vuex from 'vuex'

                                                VUe.use(Vuex);

                                                const store = new Vuex.Store({
                                                    state:{
                                                        count:1
                                                    },
                                                    mutations:{
                                                        add(state){
                                                            // 变更状态
                                                            state.count +=2
                                                        }
                                                    }
                                                })

                                                export default store
                    */
        </script>
    </body>
</html>